<template>
  <div class="twoStageWindow">
    <div class="twoStageWindowTitle">
      <span>
       {{newOrEdit=='new'?'新增':(newOrEdit=='edit'?'编辑':'查看')}}人员
      </span>
      <div class="twoStageWindowClose">
        <el-button size="mini" type="primary" @click="submitStaff" v-if="newOrEdit != 'look'" :disabled="!isRepeat">提交</el-button>
        <el-button size="mini" @click="close('userInfoForm')">取消</el-button>
      </div>
    </div>
    <div class="containercontent">
      <div class="tabDivHeight">
        <el-tabs v-model="activeName" style="width: 100%;">
          <el-tab-pane label="人员基本信息" name="basicInfo">
            <div class="form">
              <el-form label-width="110px" :inline="false" class="demo-form-inline " :model="userInfoForm" :rules="userInfoFormRules" ref="userInfoForm">
                <el-form-item label="组织架构账号" prop="account" class="decalText">
                  <el-col :span="22">
                    <el-input size="mini" :disabled="!canEdit || newOrEdit =='edit'" v-model="userInfoForm.account" @focus='getSatff'
                      suffix-icon="el-icon-menu"></el-input>
                  </el-col>
                </el-form-item>
                <!--departmentname-->
                <!--<el-form-item label="组织架构" prop="department" v-if="false">
                      <el-col :span="22">
                          <el-input size="mini" placeholder="不用录入，自动带出" v-model="userInfoForm.department"  disabled ></el-input>
                      </el-col>
                    </el-form-item>-->

                <el-form-item label="组织架构" prop="departmentName">
                  <el-col :span="22">
                    <el-input size="mini" placeholder="不用录入，自动带出" v-model="userInfoForm.departmentName" disabled></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                  <el-col :span="22">
                    <el-input size="mini" placeholder="请输入内容" v-model="userInfoForm.name" :disabled="!canEdit"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="学历" prop="education">
                  <el-col :span="22">
                    <el-input size="mini" placeholder="请输入内容" v-model="userInfoForm.education" :disabled="!canEdit"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-col :span="22">
                    <!--sexValue-->
                    <el-select v-model="userInfoForm.sex" placeholder="请选择" size="mini" style="width:100%;" :disabled="!canEdit">
                      <el-option v-for="item in sexValue" :key="item.code" :label="item.name" :value="item.code">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item label="联系电话" prop="mobile">
                  <el-col :span="22">
                    <el-input size="mini" placeholder="请输入内容" v-model="userInfoForm.mobile" :disabled="!canEdit"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-col :span="22">
                    <el-input size="mini" placeholder="请输入内容" v-model="userInfoForm.email" :disabled="!canEdit"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="生日" prop="birthday">
                  <el-col :span="22">
                    <el-date-picker v-model="userInfoForm.birthday" type="date" size="mini" style="width:100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                      :disabled="!canEdit" placeholder="选择日期" @change = "userInfoForm.entryTime =''">
                    </el-date-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="入职时间" prop="entryTime">
                  <el-col :span="22">
                    <el-date-picker v-model="userInfoForm.entryTime" type="date" size="mini" style="width:100%;" format="yyyy-MM-dd" :disabled="!canEdit"
                      value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-col>
                </el-form-item>
                <!--<el-form-item label="状态" prop="status">
                      <el-col :span="22">
                        <el-select v-model="userInfoForm.status" placeholder="请选择" size="mini" style="width:100%;">
                          <el-option
                            v-for="item in enableStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-form-item>-->
                <el-form-item label="职位" prop="position">
                  <el-col :span="22">
                    <el-input size="mini" placeholder="请输入内容" v-model="userInfoForm.position" :disabled="!canEdit"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item :label="stationName" prop="idcard" class="wid100">
                  <el-col :span="22">
                    <el-select v-model="userInfoForm.idcard" placeholder="请选择" multiple size="mini" style="width:100%;" :disabled="!canEdit"  @change="changeStation">
                      <el-option label="全部" value="ALL"></el-option>
                      <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id" :disabled="item.status == 0 || !selectFlag">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item label="分组" class="wid100" prop="grouping">
                  <el-col :span="22">
                    <!--有机组组长-->
                    <el-select v-model="userInfoForm.grouping" placeholder="请选择" multiple size="mini" style="width:100%;" :disabled="!canEdit">
                      <el-option v-for="item in groupSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item label="岗位" class="wid100" prop="post">
                  <el-col :span="22">
                    <!--有机组组长-->
                    <el-select v-model="userInfoForm.post" placeholder="请选择" multiple size="mini" style="width:100%;" :disabled="!canEdit">
                      <el-option v-for="item in groupSelect.itemList" :key="item.code" :label="item.name + '组长'" :value="item.code">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item label="角色" class="wid100 roleInput">
                  <el-col :span="22">
                    <el-select v-model="userRole" placeholder="请选择" multiple size="mini" style="width:100%;" @change="changeRole" :disabled="!canEdit">
                      <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <div class="el-form-item__error" v-if="roleError">
                    请选择角色
                  </div>
                </el-form-item>
              </el-form>

            </div>
          </el-tab-pane>
          <el-tab-pane label="检测能力" name="maintenanceRecord">

            <div class="tableTittle">
              <el-button size="mini" type="primary" icon="el-icon-plus" style="float:right" @click="addAblity" v-if="newOrEdit != 'look' && $parent.userOpernation.add.display">添加能力参数</el-button>
            </div>
            <el-table :data="userInfoForm.edList" style="width: 100%;height:calc(100% - 46px)" class="tableCon" size="mini">
              <el-table-column label="序号" fixed min-width="50px">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column property="name" label="能力参数" fixed min-width="300px" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column property="version" label="版本" min-width="80px">
              </el-table-column>
              <el-table-column property="group" :formatter="groupFomatter" :show-overflow-tooltip="true" label="分组" min-width="100px">
              </el-table-column>
              <el-table-column property="detectObject" label="检测对象" :show-overflow-tooltip="true" :formatter="objectFomatter" min-width="100px">
              </el-table-column>

              <el-table-column label="操作"  min-width="100px" v-if="newOrEdit != 'look'">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="deleteAblity(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="培训记录" name="periodicityPlan" v-if="newOrEdit == 'look'">
            <div class="seachTip selectw100">
              <div class="inlineblock  infoitem">
                <div class="inlineblock verticalmiddle">
                  时间范围
                </div>
                <div class="inlineblock  informationItem">
                  <el-date-picker size="mini" v-model="dateFrame" type="daterange" range-separator="-" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    start-placeholder="开始日期" end-placeholder="结束日期" @change="readRecord">
                  </el-date-picker>
                </div>
              </div>
              <div class="inlineblock  infoitem">
                <div class="inlineblock searchIcon">
                  <el-button size="mini" @click="readRecord(recordQuery)">搜索</el-button>
                </div>
                <div class="inlineblock verticalmiddle searchIcon" style="margin-left:15px;">
                  <el-button size="mini" @click="emptyRecord(recordQuery)">清空</el-button>
                </div>
              </div>
            </div>
            <div style="height:40px;line-height:40px;width:100%;">
              <div style="display:inline-block;width:30%">累计积分: <span>{{sumBoard}}</span></div>

              <div style="display:inline-block;width:30%">累计学时(h): <span>{{sumTime}}</span></div>
            </div>
            <div class="separaterow">
              <el-table :data="trainRecord" style="width: 100%;height:100%;" size="mini" class = "tableCon">
                <el-table-column label="序号" min-width="50px">
                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>
                </el-table-column>
                <el-table-column property="startDate" label="日期" :formatter="formatterTime" min-width="100px">
                </el-table-column>
                <el-table-column property="name" label="内容" min-width="180px" show-overflow-tooltip>
                </el-table-column>
                <el-table-column property="trainPlace" label="地点" min-width="180px" show-overflow-tooltip>
                </el-table-column>
                <el-table-column property="trainTime" label="时长(h)" min-width="100px">
                </el-table-column>
                <el-table-column property="leaderboard" label="积分" min-width="100px">
                </el-table-column>

                <!--<el-table-column property="fujian" label="附件" min-width="120px">
                </el-table-column>-->
              </el-table>
            </div>
            <div class="block changepages">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="recordQuery.page" :page-sizes="[20,30,40]"
                :page-size="recordQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
    <div class="user-footer" v-if="newOrEdit == 'look'">
      <span>
          创建人:{{userInfoForm.createBy}}
        </span>
      <span>
          创建时间:{{userInfoForm.createTime}}
        </span>
      <span v-if="userInfoForm.updateBy != undefined">
          修改人：{{userInfoForm.updateBy}}
        </span>
      <span v-if="userInfoForm.updateTime != undefined">
          修改时间：{{userInfoForm.updateTime}}
        </span>
    </div>
    <el-dialog :visible.sync="getStaffShow" width="65%" :show-close='false' :closeOnClickModal='false' append-to-body class="getStaffShow">
      <span slot="title" class="dialog-title">
          选择人员
			    <el-button @click="closeStaff" size="mini" class="popupClose">关闭</el-button>
			  </span>
      <get-staff @ievent="getChildTree" @staffEvent="getChildStaff" ref="multipleStaff"></get-staff>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="subStaff" size="mini">确 定</el-button>
            <el-button  size="mini" @click="closeStaff">取 消</el-button>
          </span>
    </el-dialog>
    <el-dialog :visible.sync="addAblityShow" width="75%" :show-close='false' :closeOnClickModal='false' append-to-body class="addAblityForm"
      ref="addAblityForm">
      <span slot="title" class="dialog-title">
        选择能力参数
        <el-button @click="closeAblity" size="mini" class="popupClose">关闭</el-button>
      </span>
      <div style="width:100%;float:right;" class="ablityItem">
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">能力参数名称</div>
            <div class="inlineblock verticalmiddle informationItem" style = "width:calc(100% - 113px);">
              <!--@keyup.enter.native="addUser"-->
              <el-input v-model="ablityName" size="mini" placeholder="能力参数名称" @keyup.enter.native="readAblity"></el-input>
            </div>
          </div>
          <div class="inlineblock basicRightDistanceA searchIcon">
            <el-button size="mini" icon="el-icon-search" @click="readAblity"></el-button>
          </div>
        </div>
        <el-table :data="ablityData" style="width: 100%;" size="mini" height="calc(100% - 40px)" class="tableCon" @selection-change="handleSelectionChange"
          ref="multipleTable">
          <el-table-column type="selection" width="55" fixed></el-table-column>
          <el-table-column label="序号" fixed min-width="50px">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column property="name" label="能力参数" min-width="300px" fixed  :show-overflow-tooltip="true"></el-table-column>
          <el-table-column property="version" label="版本" min-width="80px"></el-table-column>
          <el-table-column property="group" label="分组" min-width="100px" :formatter="groupFomatter" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column property="detectObject" label="检测对象" min-width="100px" :formatter="objectFomatter" :show-overflow-tooltip="true"></el-table-column>
        </el-table>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subAblity" size="mini">添加能力参数</el-button>
        <el-button  size="mini" @click="closeAblity">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import $ from 'jquery';
  const getStaff = () => import('./staff.vue');

  export default {
    data() {
      var that = this
      return {
        activeName: 'basicInfo',
        userInfoForm: {
          edList: [],
          cList: [],
          post: [],
          account: '',
          department: '',
          sex: null,
          departmentName: "",
          name: "",
          education: "",
          mobile: "",
          email: "",
          birthday: "",
          entryTime: "",
          position: "",
          status: "",
          grouping:[],
          idcard:['ALL'],
        },
        stationName:'厂站',
        staionAll:'ALL',
        stationList:[],
        selectFlag:true,
        userInfoFormRules: {
          account: [{ required: true, type: 'string', message: '请填写名称', trigger: 'blur' },],
          idcard:[{ required: true,  message: '请选择', trigger: 'change'}]
          // mobile: [{
          //   validator: (rule, value, callback) => {
          //     var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
          //     if (value == '' || value == undefined) {
          //       callback();
          //     } else if (!reg.test(value)) {
          //       callback(new Error('请填写正确电话'));
          //     } else {
          //       callback();
          //     }
          //   }, trigger: 'blur',
          // }
          // ],
        },
        getStaffShow: false, //职员列表
        addAblityShow: false, //添加能力参数弹框
        ablityData: [], //能力参数列表数据
        selectAblity: [], //被勾选的能力参数
        ablityName: '', //搜索时能力参数名称
        treeData: {}, //选中的树的数据
        staffData: {}, //选中的员工的数据
        isRepeat: true,
        dateFrame: [],
        trainRecord: [],
        recordQuery: {
          page: 1,
          pageCount: 20
        },
        rowNumber: 0,
        sumBoard: 0,
        sumTime: 0,
        userRole: [],
        roleList: [],
        pickerOptions: { //采样日期 只能选择今天之前
          disabledDate(time) {
            if (that.userInfoForm.birthday != '') {
              let startDate = new Date(that.userInfoForm.birthday);
              return (time.getTime() < startDate.getTime() - 8.64e6);
            }
          }
        },
        roleError:false,
      }
    },
    props: ['newOrEdit', 'userDetail', 'canEdit'],
    components: {
      getStaff
    },
    computed: {
      ...mapState(['enableStatus', 'objectSelect', 'groupSelect', 'sexValue', 'yesorno']),
    },
    watch: {
      activeName(val) {
        console.log(val)
        if (val == "periodicityPlan") {
          this.readRecord();
          this.getSum();
        }
      },

      recordQuery: {
        handler(val, oldVal) {
          this.readRecord(this.recordQuery)
        },
        deep: true
      },
    },
    mounted() {
      this.$store.dispatch('dogetDictionary');
      for (var i in this.userDetail) {
        this.userInfoForm[i] = this.userDetail[i]
      }
      if(this.newOrEdit == 'look' || this.newOrEdit == 'edit'){
        this.userRole = []
          for(var i in this.userInfoForm.roleList){
             this.userRole.push(this.userInfoForm.roleList[i].role)
          }
          this.userInfoForm.idcard = this.userInfoForm.idcard.split(',')
          

      }
      if(this.userInfoForm.idcard.indexOf('ALL') != -1){ //包含all
        this.selectFlag = false
      }
      if (this.userInfoForm.createTime != undefined) {
        this.userInfoForm.createTime = this.userInfoForm.createTime.slice(0, this.userInfoForm.createTime.indexOf("."));
      }
      if (this.userInfoForm.updateTime != undefined) {
        this.userInfoForm.updateTime = this.userInfoForm.updateTime.slice(0, this.userInfoForm.updateTime.indexOf("."));
      }
      this.getStaion()
      this.getRoleList()

    },
    methods: {
      // 处理时间
      formatterTime(row, column) {
        var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(row.startDate);
        return newDate;
      },
      // 处理分组
      groupFomatter(row, column, cellValue, index) {
        return this.util.codeChangeName({ cellValue: cellValue, list: this.groupSelect.itemList })
      },
      // 检测对象
      objectFomatter(row, column, cellValue, index) {
        return this.util.codeChangeName({ cellValue: cellValue, list: this.objectSelect.itemList })
      },
      // 鼠标聚焦，弹出人员列表
      getSatff(event) {
        this.getStaffShow = true;
      },
      // 从子组件接收树的数据
      getChildTree(data) {
        this.treeData = data;
      },
      // 从子组件里面接收已选人员数据
      getChildStaff(data) {
        this.staffData = data;
      },
      getRoleList() {
        this.$http({
          method: 'post',
          apiUrl: '/resource/getRoleList.htm',
        }).then(res => {
          if (res.code === 0) {
            // console.log(res.data)
            this.roleList = res.data
          }

        })
      },
      getStaion(){
         var stationList =JSON.parse(sessionStorage.getItem('stationList'));
         this.stationName = this.util.getStationName(stationList)
          var compare = function (prop) {
              return function (obj1, obj2) {
                  var val1 = obj1[prop];
                  var val2 = obj2[prop];
                  if (val1 < val2) {
                      return 1;
                  } else if (val1 > val2) {
                      return -1;
                  } else {
                      return 0;
                  }
              }
          }
          let arr = stationList.sort(compare("status"))
          this.stationList = arr;


      },
      changeStation(val){
        if(val.indexOf('ALL') != -1){ //包含all
          val=[].concat(["ALL"]);
          this.selectFlag = false
        }else{
          this.selectFlag = true
        }
        this.userInfoForm.idcard = val
      },
      // 关闭弹框 存储选中是的部门树和人员
      subStaff() {
        console.log(this.treeData, this.staffData)
        if(JSON.stringify(this.staffData) == "{}"){
          this.$notify({
						title: "警告",
						message: "请先选择人员！",
						type: "warning"
					});
          return
        }
        this.getStaffShow = false;
        this.userInfoForm.account = this.staffData.loginid;
        this.userInfoForm.department = this.staffData.orgcode;
        this.userInfoForm.departmentName = this.staffData.departmentname;
        this.userInfoForm.name = this.staffData.name;
        this.userInfoForm.sex = parseInt(this.staffData.sex);
        this.userInfoForm.mobile = this.staffData.mobile;
        this.userInfoForm.email = this.staffData.email;
        $(".decalText .el-form-item__error").hide()
        $('.decalText.el-form-item.is-error').removeClass("is-error")
        this.toggleSelect()
      },
      // 继承从子元素传过来的数据 清空选中的人员
      toggleSelect() {
        this.$refs.multipleStaff.toggleSelection()
      },
      // 关闭人员列表
      closeStaff() {
        this.getStaffShow = false;
        this.toggleSelect()
      },
      // 点击添加能力参数 弹出弹框
      addAblity() {
        this.addAblityShow = true;
        this.readAblity();
      },
      // 读取能力参数列表
      readAblity() {
        var data = {
          name: this.ablityName,
          status:1,
        };
        this.$http({
          method: 'post',  //readDetectList
          apiUrl: '/technology/readDetectList.htm',
          params: data,
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            // this.ablityData = res.data;
            // 去掉检测能力列表里面已经存在的
            // var arr = this.userInfoForm.edList.concat(res.data);
            var arr = res.data.filter(item => {
              let idList= this.userInfoForm.edList.map(v => v.code)
              return !idList.includes(item.code)
            })
            this.ablityData = arr
            console.log(this.ablityData)
            // this.ablityData = this.util.repeatData({ old: res.data, new: this.userInfoForm.edList, unique: 'code' })
          }

        })
      },
      // 选中的能力参数
      handleSelectionChange(val) {
        this.selectAblity = val;
      },
      // 提交选中的能力参数并去重
      subAblity() {
        this.userInfoForm.edList = this.util.repeatData({ old: this.userInfoForm.edList, new: this.selectAblity, unique: 'code' })
        this.getStaffShow = false;
        this.closeAblity();
      },
      // 关闭能力参数弹框
      closeAblity(){
        this.ablityName = "";
        this.ablityData = [];
        this.addAblityShow = false;
      },
      // 清空选中数据--能力参数
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 删除能力参数
      deleteAblity(index) {
        this.userInfoForm.edList.splice(index, 1);
      },
      changeRole(){
        if(this.userRole.length != 0){
          this.roleError = false;
          $('.roleInput').addClass('is-success').removeClass('is-error')
        }else{
          this.roleError = true;
          $('.roleInput').addClass('is-error').removeClass('is-success')
        }
      },
      // 最终提交新增或者编辑的人员数据
      submitStaff(userInfoForm) {
        this.$refs.userInfoForm.validate((valid) => { //表单验证
          if (valid) {
            var flag = true
            if(this.userRole.length == 0){
               this.roleError = true;
               $('.roleInput').addClass('is-error')
              flag = false;
            }
            if(!flag){
              return;
            }
            var arrDetect = []
            for (var i in this.userInfoForm.edList) {
              var obj = {};
              obj.detectability = this.userInfoForm.edList[i].id;
              obj.detectabilityName = this.userInfoForm.edList[i].name;
              arrDetect.push(obj);
            }
            var data = {
              name: this.userInfoForm.name,
              account: this.userInfoForm.account,
              department: this.userInfoForm.department,
              sex: this.userInfoForm.sex,
              mobile: this.userInfoForm.mobile,
              education: this.userInfoForm.education,
              birthday: this.userInfoForm.birthday,
              entryTime: this.userInfoForm.entryTime,
              position: this.userInfoForm.position,
              grouping:this.userInfoForm.grouping,
              post: this.userInfoForm.post,
              email: this.userInfoForm.email,
              edList: arrDetect,
              idcard:this.userInfoForm.idcard.join(",")

            };

            if (this.newOrEdit == 'new') {
              var url = '/resource/creatEmployee.htm';
              data.status = 1;
            } else {
              var url = '/resource/updateEmployee.htm';
              data.id = this.userInfoForm.id;
            }
            this.isRepeat = false;
            this.$http({
              method: 'post',
              apiUrl: url,
              params: data,
              isJson: true,
            }).then(res => {
              this.isRepeat = true;
              if (res.code == 0) {
                this.creatEmpRole()
                this.chageUser();
              }

            }).catch(() => {

            });

          } else {
            if(this.userRole.length == 0){
               this.roleError = true;
               $('.roleInput').addClass('is-error')
            }
            return false;
          }
        });
      },
      chageUser(){ //更新用户的idcard
        this.$http({
        	method: 'post',
        	apiUrl: '/accountInfo.htm',
        	params: {}
        }).then(res => {
        	if (res.code == 0) {
        		sessionStorage.setItem('laboratoryAccountInfo', JSON.stringify(res.data));
        	}

        });
      },
      // 选取人员信息的角色
      creatEmpRole() {
        var temp = []
        for (var i in this.userRole) {
          var obj = {};
          obj.role = this.userRole[i];
          obj.user = this.userInfoForm.account
          temp.push(obj)
        }
        this.$http({
          method: 'post',
          apiUrl: "/resource/creatEmpRole.htm",
          params: temp,
          isJson: true,
        }).then(res => {
          this.isRepeat = true;
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '提交成功!'
            });
            this.close('userInfoForm');
            this.$parent.readUser(this.$parent.employeQuery)
          }

        }).catch(() => {

        });
      },
      emptyRecord() {
        this.dateFrame = [];
        this.readRecord(this.recordQuery);
      },
      // 读取培训记录
      readRecord(parp) {
        var params = {
          user: this.userInfoForm.account,
          page: this.recordQuery.page,
          pageCount: this.recordQuery.pageCount,
        }
        if (this.dateFrame == null || this.dateFrame.length == 0) {
          params.bTime = "";
          params.eTime = "";
        } else {
          params.bTime = this.dateFrame[0];
          params.eTime = this.dateFrame[1];
        }

        this.$http({
          method: 'post',
          apiUrl: '/resource/getTrainCourseBeansByUser.htm',
          params: params,
          isJson: true,
        }).then(res => {
          if (res.code === 0) {
            this.trainRecord = res.data
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }

        })
      },
      // 获得总时长和总积分
      getSum(parp) {
        var params = {
          account: this.userInfoForm.account,
        }
        this.$http({
          method: 'post',
          apiUrl: '/resource/getSum.htm',
          params: params,
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            if (res.data == undefined) {
              res.data = {};
              res.data.boardSum = 0;
              res.data.timeSum = 0;
            }
            this.sumBoard = res.data.boardSum;
            this.sumTime = res.data.timeSum;

          }

        })
      },
      handleSizeChange: function (val) {
        this.recordQuery.pageCount = val;
      },
      handleCurrentChange: function (val) {
        this.recordQuery.page = val;
      },
      // 关闭新增和编辑弹框
      close(formName) {
        this.$refs[formName].resetFields();
        this.$parent.userDetailShow = false;
        this.$parent.userDetail = {
          name: '',
          edList: [],
          cList: [],
          department: '',
          email: '',
          mobile: '',
          sex: null,
          status: '',
          post: [],
          grouping:[],
          account: '',
          departmentName: "",
          education: "",
          birthday: "",
          entryTime: "",
          position: "",
          idcard:['ALL'],

        }
        this.isRepeat = true;

      },
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tabName {
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
  }

  .activeTab {
    color: #409eff;
  }

  .infoitem {
    width: calc(100%/2);
    padding-right: 20px;
    float: left;
  }

  .separaterow {
    margin-top: 5px;
    height: calc(100% - 140px)
  }

  .informationItem {
    width: calc(100% - 113px);
    float: right;
  }

  .jueseCheckbox {
    width: 25%;
  }

  .containercontent {
    height: calc(100% - 40px);
    padding: 0 20px;
    margin-top: 40px;
  }

  .tabDivHeight,
  .tabDivHeight .el-tabs {
    height: 100%;
  }
</style>
<style>
  .tabDivHeight .el-tabs .el-tabs__content {
    height: calc(100% - 55px);
  }

  .tabDivHeight .el-tabs .el-tabs__content .el-tab-pane {
    height: 100%;
  }

  .tabDivHeight .form {
    height: 100%;
    overflow: auto;
  }

  .tabDivHeight .form {
    height: 100%;
  }

  .tabDivHeight .form .el-form-item {
    margin-bottom: 10px;
    width: 47.5%;
    display: inline-block
  }

  .tabDivHeight .form .el-form-item.wid100 {
    width: 100%;
  }

  .getStaffShow .el-dialog {
    margin-top: 12vh;
    height: 75%;
  }

  .getStaffShow .el-dialog .el-dialog__body {
    padding: 0 10px;
    height: calc(100% - 98px)
  }

  .addAblityForm .el-dialog {
    height: 70%;
  }

  .addAblityForm .el-dialog .el-form-item {
    margin-bottom: 20px;
  }

  .addAblityForm .el-dialog .el-dialog__body {
    height: calc(100% - 85px);
    padding: 10px;
  }

  .addAblityForm .el-dialog .el-dialog__body .form {
    height: 60px;
  }

  .addAblityForm .el-dialog .el-dialog__body .ablityItem {
    height: 100%;
    padding: 0 20px;
  }
  .addAblityForm .el-dialog .el-dialog__body .ablityItem .el-table {
    height: calc(100% - 50px)
  }

  .addAblityForm .el-dialog .el-dialog__footer {
    height: 45px;
    line-height: 45px;
    padding: 0 20px !important;
  }

  .user-footer {
    height: 35px;
    line-height: 35px;
  }
  .decalText .el-input__inner{
      cursor: pointer;
  }
  .roleInput .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
</style>
